<template>
  <div class="app">
    <Navigation title="首页">
      <template #right>
        <i class="login iconfont icon-wode"
           @click="login"></i>
      </template>
    </Navigation>
    <!-- 
      Vue中在自定义组件使用时为自定义组件添加的属性默认会被添加到该自定义组件对应的HTML结构的最外层标签
     -->
    <router-view class="view"></router-view>
  </div>
</template>

<script>
//vue引入自定组件
import Navigation from "@/components/Navigation";
export default {
  name: "App",
  components: {
    Navigation
  },
  methods: {
    login () {
      alert('开始登陆');
    }
  }
}
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.view {
  height: 100%;
  background-color: red;
}
.app {
  height: 100%;
}
html,
body {
  height: 100%;
}
</style>